<template>
  <div class="app-container" style="height: 100%;">
    <div class="app-container-inner" v-loading="loading" element-loading-text="加载中...">
      <div class="header_search">
        <el-select class="input-with" filterable clearable v-model="goodsData.brandId" @change="getList"
          :remote-method="getworkRolePageSelect" :loading="loading" remote remote-show-suffix placeholder="品牌">
          <el-option v-for="item in BrandSelectList" :value="item.id" :label="item.name" :key="item.id" />
        </el-select>
        <el-select class="input-with" filterable clearable v-model="goodsData.goodsTypeId" @change="getList"
          :remote-method="getworkRolePageSelect2" :loading="loading" remote remote-show-suffix placeholder="商品分类">
          <el-option v-for="item in GoodsTypeSelectList" :value="item.id" :label="item.name" :key="item.id" />
        </el-select>
        <el-input v-model="goodsData.keyword" placeholder="商品名称/型号" class="input-with" clearable
          @keyup.enter.native="getList">
        </el-input>
        <button class="btn btn-bg1" @click="getList">
          <el-icon class="mr5">
            <Search />
          </el-icon>搜索
        </button>
      </div>
      <div class="table">
        <el-table border stripe resizable :data="tableData" ref="tableList" height="100%" style="position: absolute;">
          <el-table-column show-overflow-tooltip type="index" label="序号" fixed width="50" />
          <el-table-column show-overflow-tooltip prop="name" label="商品名称" min-width="160" fixed />
          <el-table-column show-overflow-tooltip prop="brand" label="商品品牌" width="150" />
          <el-table-column show-overflow-tooltip prop="model" label="商品型号" min-width="150" />
          <el-table-column prop="type" label="商品分类" width="150" />
          <el-table-column show-overflow-tooltip prop="specName" label="商品规格" min-width="100" />
          <el-table-column prop="createTime" label="创建时间" width="130" />
          <el-table-column prop="updateTime" label="更新时间" width="130" />
        </el-table>
      </div>
      <div class="footer">
        <Pagination ref="pagination" :list_total="total" @size-change="getList" @current-change="getList" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Pagination from '@/components/Pagination/index.vue'
import { getBrandList, getBrandSelect, getGoodsTypeSelect } from '../../api/brand'
import { ref, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Delete, Warning } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const loading = ref(false)
const pagination = ref()
const tableList = ref()
const code = ref('') // 品牌编码
const tableData = ref([]) // 品牌列表
const total = ref()
const goodsData = ref({
  "brandId": null,
  "goodsTypeId": null,
  "keyword": "",
  "limit": 0,
  "page": 0
})
// 获取品牌列表
const getList = async () => {
  loading.value = true
  goodsData.value.limit = pagination.value.size
  goodsData.value.page = pagination.value.current
  await getBrandList(goodsData.value).then((res: any) => {
    total.value = parseInt(res.data.data.total)

    tableData.value = res.data.data.rows
  })
  loading.value = false
}
// ---------获取品牌-----------
let valText = ref('')
const BrandSelectList = ref([])
const getworkRolePageSelect = (val) => {
  valText.value = val
}
watch(valText, (n) => {
  getFactoryRoleSelectlist(n)
})
const getFactoryRoleSelectlist = async (val) => {
  let data = {
    keyword: val,
    limit: 0,
    page: 0,
  }
  let res = await getBrandSelect(data)
  BrandSelectList.value = res.data.data.rows
}
// -------获取商品分类-------
let valText2 = ref('')
const GoodsTypeSelectList = ref([])
const getworkRolePageSelect2 = (val) => {
  valText2.value = val
}
watch(valText2, (n) => {
  getGoodsTypeSelectList(n)
})
const getGoodsTypeSelectList = async (val) => {
  let data = {
    keyword: val,
    limit: 0,
    page: 0,
  }
  let res = await getGoodsTypeSelect(data)
  GoodsTypeSelectList.value = res.data.data.rows
}
// ------------end-----------
onMounted(() => {
  getList()
  getFactoryRoleSelectlist('')
  getGoodsTypeSelectList('')
})

</script>

<style scoped lang="scss">
@import './index';
</style>
